<template>
  <form-layout @query="query">
    <template #baseForm1_8>
      <g-formItem
        type="input"
        :value="userName"
        label="用户姓名"
        @valueChange="(v) => (userName = v)"
      ></g-formItem>
    </template>
    <template #baseForm2_8>
      <g-formItem
        type="select"
        :value="sex"
        label="性别"
        :option="sexOptions"
        @valueChange="(v) => (sex = v)"
      ></g-formItem>
    </template>
    <template #highForm1_24>
      <g-formItem
        type="select"
        :value="sex"
        label="性别"
        :option="sexOptions"
        @valueChange="(v) => (sex = v)"
      ></g-formItem>
    </template>
    <template #table>
      <my-table
        ref="queryTable"
        :tableHeader="tableHeader()"
        :serialNumber="true"
        :isPaging="true"
        :pageType="'local'"
        :selection="true"
        url="/queryTable"
        :tableData="table.data"
        :defaultTool="['customColumn', 'checkAll']"
        customKey="queryTable_1"
        @toolButtonCheckAll="toolButtonCheckAll"
        @tableSelect="tableSelect"
      >
        <template #tableTool>
          <el-button class="g-minibutton">新增用户1</el-button>
          <el-button class="g-minibutton">新增用户2</el-button>
        </template>
        <template #header_name>
          <el-button class="g-minibutton">用户姓名</el-button>
        </template>
        <template #userStatus="{ data }">
          <g-formItem
            type="switch"
            labelWidth="60px"
            :value="data.row['userStatus']"
            :label="data.row['userStatus'] ? '禁用' : '启用'"
            @valueChange="(v) => (data.row['userStatus'] = v)"
          ></g-formItem>
        </template>
        <template #action="{ data }">
          <el-button
            class="g-noborderButton"
            icon="View"
            @click="lookUserDetail(data)"
            >查看</el-button
          >
          <el-button
            class="g-noborderButton"
            icon="Edit"
            @click="userEdit(data)"
            >编辑</el-button
          >
          <el-button
            class="g-noborderButton"
            icon="Delete"
            @click="userDelete(data)"
            >删除</el-button
          >
        </template>
      </my-table>
    </template>
  </form-layout>
</template>
<script setup>
import Mock from "mockjs";
import { nextTick, onMounted, reactive, ref } from "vue";
import request from "@/api/request";
import { createDialog } from "./renderDialog.js";
const dataTemplate = {
  'list|30': [{
    'id|+1': 1,
    'name': '@cname', // 随机中文姓名
    'sex|1': ['男', '女'], // 随机性别
    'nongli': '@date("yyyy-MM-dd")', // 随机生日
    'yangli': '@date("yyyy-MM-dd")', // 随机生日
    'age': function() {
      const birthYear = new Date(this.yangli).getFullYear();
      const currentYear = new Date().getFullYear();
      return currentYear - birthYear;
    },
    'userId': function() {
      return Mock.Random.id(); // 随机身份证号
    },
    'email': '@email', // 随机邮箱
    'address': '@county(true)', // 随机地址
    'assets|1-1000000': 1, // 随机资产
    'status|1': ['活跃', '冻结', '注销'], // 随机用户状态
    'title': '@ctitle(5, 20)' // 随机标题
  }]
};
const options = [
  { label: "20", value: 1 },
  { label: "21", value: 2 },
  { label: "22", value: 3 },
  { label: "23", value: 4 },
  { label: "24", value: 5 },
  { label: "25", value: 6 },
];
const tableHeader = () => {
  return [
    {
      prop: "info",
      label: "个人信息",
      children: [
        {
          prop: "userId",
          label: "身份证号",
          width: 150,
          initHide: true,
        },
        {
          prop: "sex",
          label: "性别",
          edit: (row)=>{
            return row.userId === '22222222222'
          },
          type: "date",
          options: [
            { label: "男", value: 1 },
            { label: "女", value: 2 },
          ],
        },
        {
          prop: "age",
          label: "年龄",
          edit: true,
          type: "select",
          options: options,
        },
        {
          prop: "name",
          label: "姓名",
          headerSlot: true,
          width: 120,
          formatter: nameFormatter,
          click: nameClick,
        },
        {
          prop: "birth",
          label: "生日",
          children: [
            { prop: "nongli", label: "农历"  ,edit: true,type: "input",},
            { prop: "yangli", label: "阳历", initHide: true },
          ],
        },
        { prop: "email", label: "邮箱", width: 100 },
        { prop: "asset", label: "资产", width: 100 },
      ],
    },
    { prop: "userStatus", label: "用户状态", isSlot: true, width: 150 },
    {
      prop: "address",
      label: "地址",
      width: 260,
      edit: true,
      initHide: false,
      type: "input",
    },
    { prop: "title", label: "备注", width: 450 ,edit: true,type: "input",},
    { prop: "action", label: "操作", isSlot: true, width: 300, fixed: "right" },
  ];
};
const nameFormatter = (row, column, cellValue, index) => {
  return `<span class="my-fontColor">${cellValue || ""}</span>`;
};
const nameClick = () => {};
const queryTable = ref(null);
const table = reactive({data:[]});
onMounted(() => {
  queryTable.value.query();
});
const query = () => {
  console.log(Mock.mock(dataTemplate))
  table.data = Mock.mock(dataTemplate).list
  nextTick(() => {
    queryTable.value.query();
  });
};
/**
 * 操作列
 */
const lookUserDetail = ({ row, column }) => {
  // console.log(EditDialog);
  nextTick(() => {
    createDialog().show();
  });
};
const userEdit = (data) => {};
const userDelete = (data) => {};
/**
 * 筛选条件
 */
const userName = ref("");
const sexOptions = [
  { label: "男", value: 1 },
  { label: "女", value: 0 },
];
const sex = ref("");
const toolButtonCheckAll = (isCheck,data)=>{
  console.log(isCheck,data)
}
const tableSelect = (checkList,isCheck)=>{
  console.log(checkList,isCheck)
}
</script>

<style scoped></style>